<template>
    <div class="screen-common-box">
        <!-- 头部tab栏 -->
        <div class="screenItem">
            <div class="tabList">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in tabList" :key="item.id" :label="item.name" :name="index">
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="contentBox">
                <div class="leftBox">
                    <div class="" :class="showLargePrew ? 'previewDialog' : 'previewBox'">
                        <div :class="showLargePrew ? 'screenViewBox' : ''">
                            <!-- 大屏预览 -->
                            <HomeView :isRem="false" :configData="tabList">
                            </HomeView>
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <div style="position: absolute;bottom: 20px;text-align: center;width:100%;">
                        <el-button type="primary" class="white-bg-btn" plain @click="refreshChild">重置</el-button>
                        <!-- <el-button type="primary" class="white-bg-btn" plain @click="largePrew">放大预览</el-button> -->
                        <el-button type="primary" @click="saveChange">保存更改</el-button>
                    </div>
                </div>
                <div class=" line">
                </div>
                <div class="rightBox">
                    <div class="title">{{ tabList.length > 0 ? tabList[Number(activeName)].name : '' }}</div>
                    <ChildrenOne v-if="Number(typeId) == 2" :typeId="typeId" :currentItem="tabList[Number(activeName)]"
                        :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenOne>
                    <ChildrenTwo v-if="Number(typeId) == 3" :typeId="typeId" :currentItem="tabList[Number(activeName)]"
                        :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenTwo>
                    <ChildrenThild v-if="Number(typeId) == 4" :typeId="typeId"
                        :currentItem="tabList[Number(activeName)]" :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenThild>
                    <ChildrenFour v-if="Number(typeId) == 5" :typeId="typeId" :currentItem="tabList[Number(activeName)]"
                        :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenFour>
                    <ChildrenFive v-if="Number(typeId) == 6" :typeId="typeId" :currentItem="tabList[Number(activeName)]"
                        :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenFive>
                    <ChildrenSix v-if="Number(typeId) == 7" :typeId="typeId" :currentItem="tabList[Number(activeName)]"
                        :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenSix>
                    <ChildrenSev v-if="Number(typeId) == 1" :typeId="typeId" :currentItem="tabList[Number(activeName)]"
                        :ref="`ChildRef${typeId}`" @getConfig="getConfig">
                    </ChildrenSev>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance, h, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { TabsPaneContext } from 'element-plus'
import ChildrenOne from './ChildrenOne.vue'
import ChildrenTwo from './ChildrenTwo.vue'
import ChildrenThild from './ChildrenThild.vue'
import ChildrenFour from './ChildrenFour.vue'
import ChildrenFive from './ChildrenFive.vue'
import ChildrenSix from './ChildrenSix.vue'
import ChildrenSev from './ChildrenSev.vue'
import { getScreenSettingList, operateScreenSetting, batchOperateSetting } from '../Api/index'
// 预览组件
import HomeView from '../../views/HomeView.vue'
const typeId = ref<any>('')
const activeName = ref<any>(0)
const tabList = ref<any>([])
// 获取类目配置列表
const getConfig = async () => {
    const res: any = await getScreenSettingList({ type_id: '' })
    if (res.code !== 1) return ElMessage.error(res.message)
    tabList.value = res.data
    if (tabList.value && tabList.value.length > 0) {
        res.data.forEach((item: any) => {
            if (Number(item.type_id) === 1) {
                if (!item.content || item.content.length == 0) {
                    item.content = {
                        title: '',
                        notice: '',
                    }
                }
            } else if (Number(item.type_id) === 3) {
                if (!item.content) {
                    item.content = {
                        name: '',
                        count: '',
                        dataList: [
                            {
                                id: '',
                                level_name: '',
                                level_num: '',
                                icon: '',
                            }
                        ]
                    }
                } else if (!item.content.dataList || item.content.dataList.length === 0) {
                    item.content.dataList = [
                        {
                            id: '',
                            level_name: '',
                            level_num: '',
                            icon: '',
                        }
                    ]
                }
            } else {
                if (!item.content || item.content.length == 0) {
                    item.content = [{
                        id: ''
                    }]
                }
            }
        })
    }
    console.log(tabList.value)
    if (!typeId.value) {
        typeId.value = res.data.length > 0 ? res.data[0].type_id : ''
    }
}
// 当子组件数据发生变化的时候 
const handleClick = (tab: TabsPaneContext, event: Event) => {
    activeName.value = Number(tab.props.name)
    typeId.value = tabList.value[activeName.value].type_id
}
const { proxy } = getCurrentInstance() as any
const refreshChild = () => {
    getConfig()
}
const saveChange = async () => {
    let arr = JSON.parse(JSON.stringify(tabList.value)) // 从新组成的数据
    arr.forEach((item: any) => {
        if (Number(item.type_id) === 3) {
            item.content.dataList.forEach((items: any, indexs: number) => {
                if (!items.id) {
                    item.content.dataList.splice(indexs, 1)
                }
            })

        } else if (Number(item.type_id) !== 1) {
            console.log(item.content, 'fddddddddddddddddd')
            item.content.forEach((items: any, indexs: number) => {
                if (!items.id) {
                    item.content.splice(indexs, 1)
                }
            })
        }
    })
    const res: any = await batchOperateSetting({ updata: arr })
    if (res.code !== 1) return ElMessage.error(res.message)
    ElMessage.success(res.message)
    getConfig()
}
// 点击大屏预览
const showLargePrew = ref<boolean>(false)
const largPreRef = ref<any>(null)
const largePrew = () => {
    showLargePrew.value = true
    nextTick(() => {
        largPreRef.value.getHeight()
    })
}
onMounted(() => {
    getConfig()
})
</script>
<style lang="scss">
.screen-common-box {
    width: 100%;

    .screenItem {
        padding: 20px;
        box-sizing: border-box;

        .tabList {
            width: 100%;
            height: 60px;
            background: #F7F8FA;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .contentBox {
            margin: 40px auto;
            display: flex;
            align-items: center;
            height: calc(100vh - 400px);

            .leftBox {
                width: 696px;
                height: 100%;
                background: #F7F8FA;
                position: relative;

                .previewBox {
                    width: 1920px;
                    height: 1080px;
                    transform: translate3d(-50%, -50%, 0) scale(0.32);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: auto;
                    transform-origin: center center;
                }
            }

            .line {
                width: 1px;
                background: #E6E6E6;
                height: 100%;
                margin: 0 100px;
            }

            .rightBox {
                flex: 1;
                height: 100%;

                .title {
                    font-weight: bold;
                    font-size: 16px;
                    color: #333333;
                    padding-left: 15px;
                    position: relative;
                }

                .title::before {
                    content: '';
                    position: absolute;
                    width: 4px;
                    height: 14px;
                    left: 0;
                    background: #2C68FF;
                    top: 4px;
                    border-radius: 20px;
                }

                .tips {
                    font-weight: bold;
                    font-size: 16px;
                    color: #333333;
                    line-height: 28px;
                    margin: 15px 0 15px 0;
                    display: flex;
                    align-items: center;

                    span {
                        font-size: 14px;
                        color: #A2A3A5;
                        font-weight: 400;
                    }

                    span:first-of-type {
                        color: red;
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    .previewDialog {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: flex;
        align-items: center;

        .screenViewBox {
            width: 1920px;
            height: 1080px;
            transform: scale(0.74);
            // transform: translate3d(-50%, -50%,0) scale(0.74);
            // position: absolute;
            // top: 50%;
            // left: 50%;
            // margin: auto;
            // transform-origin: center center;
        }
    }
}
</style>
<style lang="scss" scoped>
:deep(.el-tabs) {
    height: 60px;

    .el-tabs__header {
        height: 60px;

        .el-tabs__item {
            height: 60px;
            line-height: 60px;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
        }

        .el-tabs__active-bar {
            height: 4px;
            background: #2C68FF;
        }
    }
}

:deep(.el-tabs__nav-wrap::after) {
    display: none;
}
</style>